<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ol4加载百度在线地图</title>
    <script src="../lib/ol4/ol4.js"></script>
    <script src="../lib/bd09.js"></script>
    <link rel="stylesheet" href="../css/ol4/ol.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
<div id="map"></div>
</body>
<script>

	//+proj=longlat +ellps=GRS80 +no_defs

	const projectionBD09 = new ol.proj.Projection({
		code: 'BD:09',
		extent: [-20037726.37, -11708041.66, 20037726.37, 12474104.17],
		units: 'm',
		axisOrientation: 'enu',
		global: false
	});
	ol.proj.addProjection(projectionBD09);
	ol.proj.addCoordinateTransforms('EPSG:4326', 'BD:09', coordinate => {
		return lngLatToMercator(coordinate);
	}, coordinate => {
		return mercatorToLngLat(coordinate);
	});

	const projectionExtentInBD09 = projectionBD09.getExtent();
	// debugger
	const resolutions = [];
	const maxZoom = 18;
	const minZoom = 0;
	// 计算百度使用的分辨率
	for (let i = minZoom; i <= maxZoom; i++) {
		resolutions[i] = Math.pow(2, maxZoom - i);
	}
	console.log(resolutions.toString());

	const tileGrid = new ol.tilegrid.TileGrid({
		origin: [0, 0],
		resolutions: resolutions,
		extent: projectionExtentInBD09
	});

	const baiduSource = new ol.source.TileImage({
		projection: 'BD:09',
		tileGrid: tileGrid,
		tileUrlFunction: (tileCoord, projection) => {
			let [z, x, y] = tileCoord;
			return `http://maponline0.bdimg.com/tile/?qt=vtile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20210407`;
		}
	});
	// 百度地图层
	const baiduMapLayer = new ol.layer.Tile({
		source: baiduSource
	});

	const pointList = [
		[108.356016981254, 21.6866684886638997],
		[108.3558891399534, 21.686536030287083],
		[108.3558891399534, 21.686536030287083]
	];
	const centerPoint = pointList[0]; // 邢台 - [114.507435,37.074612] ; 北京 - [116.384722, 39.889916]

	const circlePoint = ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09');

	console.log(circlePoint);

	const iconFeature = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint)
	});

	const iconStyle = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [10, 26],
			anchorXUnits: 'pixels',
			anchorYUnits: 'pixels',
			src: '../image/position_orange.png'
		})
	});
	// iconStyle.setZIndex(100);
	iconFeature.setStyle(iconStyle);

	const iconStyle1 = new ol.style.Style({
		image: new ol.style.Icon({
			anchor: [10, 26],
			anchorXUnits: 'pixels',
			anchorYUnits: 'pixels',
			src: '../image/position_orange.png'
		})
	});
	const circlePoint1 = ol.proj.transform(pointList[1], 'EPSG:4326', 'BD:09');
	const iconFeature1 = new ol.Feature({
		geometry: new ol.geom.Point(circlePoint1)
	});
	iconFeature1.setStyle(iconStyle);
	// iconFeature1.setZIndex(100);

	// iconFeature.getStyle().setZIndex(100);

	const vectorSource = new ol.source.Vector({
		features: [iconFeature, iconFeature1]
	});

	const iconLayer = new ol.layer.Vector({
		source: vectorSource
	});

	vectorSource.removeFeature(iconFeature);
	vectorSource.addFeature(iconFeature);

	const map = new ol.Map({
		layers: [
			baiduMapLayer,
			iconLayer
		],
		target: 'map',
		view: new ol.View({
			center: ol.proj.transform(centerPoint, 'EPSG:4326', 'BD:09'),
			projection: 'BD:09',
			zoom: 17,
			maxZoom: 18,
			minZoom: 3,
			resolutions
		})
	});

</script>
</html>